<template>
  <el-container class="main_con">
    <div class="filter_con">
      <div class="button_area">
        <el-button v-has type="primary" size="medium" @click="addPro">
          <i class="el-icon--left el-sc-xinjian"></i>
          新增商品
        </el-button>
      </div>
      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" v-model="obj.name" size="medium" placeholder="商品名称" style="width:300px;"></el-input>
        <label class="mr_15 mt_15">创建时间</label>
        <date-picker size="medium" @change="getTime" class="mr_15 mt_15"></date-picker>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table @selection-change="selectItem" @cell-mouse-enter="cellEnter" @cell-mouse-leave="cellLeave" :data="list" element-loading-text fit highlight-current-row>
        <el-table-column prop="name" width="275" label="商品">
          <template slot-scope="scope">
            <div class="proImg">
              <vimage style="width: 40px; height: 40px;margin-right:10px;" :src="scope.row.master" fit="fit"></vimage>
              <span class="pro_t0" v-if="scope.row.type == 0">实</span>
              <span class="pro_t1" v-if="scope.row.type == 1">虚</span>
              <span style="flex: 1;">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="积分价">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.min_price }} ~ {{ scope.row.max_price }}</span> -->
            <span>{{ scope.row.sell_price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存">
          <template slot-scope="scope">
            {{ scope.row.total - scope.row.sell}}
            <!-- <el-button v-has v-if="scope.row.editInventory" size="medium" type="text" @click="editSum(scope.row)"><i class="el-sc-bianji6"></i></el-button> -->
          </template>
        </el-table-column>
        <el-table-column prop="sell" label="销量"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <!-- <el-table-column prop="" label="营销标签"></el-table-column> -->
        <el-table-column label="操作" width="280px">
          <template slot-scope="scope">
            <!--    <el-button v-has v-if="scope.row.audit == 1 && scope.row.status == 1" type="text" @click="downItem(scope.row, true)">下架</el-button>
            <el-button v-has v-if="scope.row.audit == 1 && scope.row.status == 0" type="text" @click="upItem(scope.row, true)">上架</el-button>
            <el-button style="margin-left: 10px;" v-if="scope.row.audit == 1 && scope.row.status == 1" type="text" @click="preview(scope.row)">预览</el-button>
 -->
            <el-button v-has style="margin-left: 10px;" type="text" @click="editItem(scope.row)">编辑</el-button>
            <!-- <el-button v-has style="margin-left: 10px;" type="text" @click="copyItem(scope.row)">复制</el-button> -->
            <el-button v-has type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      <div class="table_footer" v-show="total != 0">
        <div>
          <el-button v-has :disabled="listSelected.length == 0" @click="delMul" size="medium">批量删除</el-button>
          <el-button v-has v-if="pageType == 'productList'" :disabled="disableAllUD" @click="downItem" size="medium">批量下架</el-button>
          <el-button v-has v-if="pageType == 'productListStock'" :disabled="disableAllUD" @click="upItem" size="medium">批量上架</el-button>
        </div>
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div> -->
    </div>
    <!--    <el-dialog title="修改库存" destroy-on-close :visible.sync="showSum" :width="showWidth"><inventory ref="editSumComponent" @success="editSuccess"></inventory></el-dialog>
    <el-dialog title="预览" :visible.sync="dialogTableVisible" width="500px" class="dialog_box">
      <vue-qr :text="dialogqrcopy" class="qrcopy" style="display:block"></vue-qr>
      <div class="disf">
        <span>{{ dialogqrcopy }}</span>
        <el-button @click="doCopy(dialogqrcopy)" type="text">复制链接</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改排序" :visible.sync="showSort" width="500px">
      <el-form>
        <el-form-item label="排序"><el-input-number v-model="sortfrom.sort"></el-input-number></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showSort = false">取 消</el-button>
        <el-button type="primary" @click="setsortPro">确 定</el-button>
      </div>
    </el-dialog> -->
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import {sortPro} from '@/api/mall/product.js';
import {getgoodslist, delgoods} from '@/api/mall/integral';
import vueQr from 'vue-qr';
import {objextend} from '@/utils/index.js';
export default {
  data() {
    return {
      showWidth: '50%',
      showSum: false,
      pageType: 'productList',
      detailurl: 'https://www.jingzhe365.com/h5/#/pages/detail/detail?id=',
      options: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 1,
          label: '正常'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      obj: {
        name: '',
        status: -1,
        begin_date: '',
        end_date: ''
      },
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      isLoading: false,
      list: [],
      listSelected: [],
      isCopy: true,
      dialogTableVisible: false,
      dialogqrcopy: '',
      sortfrom: {
        id: '',
        update_time: '',
        sort: ''
      },
      showSort: false
    };
  },
  components: {
    DatePicker,
    vueQr
  },
  created() {
    //判断商品列表性质
    switch (this.$route.name) {
      case 'productList':
        //销售中
        this.obj.status = 1;
        break;
      case 'productListStock':
        //仓库中
        this.obj.status = 0;
        break;
      default:
        //no code
        break;
    }
    this.pageType = this.$route.name;
  },
  mounted() {
    this.searchList();
  },
  computed: {
    disableAllUD: function() {
      if (this.listSelected.filter(e => e.audit == 0).length > 0) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    setsortPro() {
      sortPro(this.sortfrom).then(res => {
        this.getDataList();
        this.showSort = false;
      });
    },
    doCopy(orderNo) {
      this.$copyText(orderNo).then(
        res => {
          //this.$alert('复制成功');
          this.$message({
            message: '复制成功',
            type: 'success',
            duration: 2000
          });
        },
        error => {
          this.$alert('无法复制');
        }
      );
    },
    //编辑库存回调
    editSuccess() {
      this.showSum = false;
      this.getDataList();
    },
    //直接编辑库存
    editSum(obj) {
      //根据SKU打开页面大小区分
      if (obj.has_sku) {
        this.showWidth = '50%';
      } else {
        this.showWidth = '30%';
      }
      this.showSum = true;
      this.$nextTick(_ => {
        this.$refs.editSumComponent.init(obj.id);
      });
    },
    editSort(obj) {
      this.sortfrom = objextend(this.sortfrom, obj);
      this.showSort = true;
    },
    //单元格滑入
    cellEnter(row, column, cell, event) {
      row.editInventory = true;
    },
    //单元格滑出
    cellLeave(row, column, cell, event) {
      row.editInventory = false;
    },
    //新增商品
    addPro() {
      //导航到新页面
      this.$router.push('/integralgoods/goodsitem');
    },
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },
    //查询数据
    searchList() {
      //复制查询对象
      this.objTemp = Object.assign({}, this.obj);
      //删除判断是否删除状态字段
      if (this.objTemp.status == -1) {
        delete this.objTemp.status;
      }
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      getgoodslist(this.objTemp, this.page, this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        //遍历添加修改标识符
        o.data.forEach(e => {
          //this.$set(e,'editInventory',false);
          e.editInventory = false;
        });
        this.list = o.data;
        this.total = o.total;
      });
    },
    //编辑数据
    editItem(obj) {
      this.$router.push({path: '/integralgoods/goodsitem', query: {id: obj.id}});
      // getMerchant(obj.id).then(res => {
      //   let o = res.msg;
      //   this.$router.push({path:'/merchant/item',params:{'name':'asdasd'}});
      // });
    },
    //下架商品(批量)
    downItem(item, single) {
      let o = {};
      o.ids = [];
      if (single) {
        o.ids.push(item.id);
      } else {
        this.listSelected.forEach(e => {
          o.ids.push(e.id);
        });
      }
      o.status = 0;

      this.$confirm('是否要下架所选商品?')
        .then(_ => {
          this.isLoading = true;
          upDownPro(o).then(res => {
            this.isLoading = false;
            this.getDataList();
          });
        })
        .catch(_ => {
          //出错
        });
    },
    //上架商品(批量)
    upItem(item, single) {
      let o = {};
      o.ids = [];
      if (single) {
        o.ids.push(item.id);
      } else {
        this.listSelected.forEach(e => {
          o.ids.push(e.id);
        });
      }
      o.status = 1;

      this.$confirm('是否要上架所选商品?')
        .then(_ => {
          this.isLoading = true;
          upDownPro(o).then(res => {
            this.isLoading = false;
            this.getDataList();
          });
        })
        .catch(_ => {
          //出错
        });
    },
    //删除数据
    delItem(id) {
      this.$confirm('是否要删除该条数据?')
        .then(_ => {
          let ids = [];
          ids.push(id);
          this.isLoading = true;
          delgoods({ids: ids})
            .then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getDataList();
            })
            .catch(e => {
              this.isLoading = false;
            });
        })
        .catch(_ => {
          //empty
        });
    },
    //选择记录
    selectItem(selection) {
      this.listSelected = selection;
    },
    //批量删除商户
    delMul() {
      //this.$alert('功能暂未开发!');
      this.$confirm('是否删除选中的记录?').then(_ => {
        let ids = [];
        this.listSelected.forEach(e => {
          ids.push(e.id);
        });
        this.isLoading = true;
        delPro({ids: ids})
          .then(res => {
            this.isLoading = false;
            this.getDataList();
          })
          .catch(e => {
            this.isLoading = false;
          });
      });
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    },
    // 复制商品
    copyItem(obj) {
      this.$router.push({
        path: '/product/item',
        query: {
          id: obj.id,
          isCopy: this.isCopy
        }
      });
    },
    preview(vlue) {
      this.dialogTableVisible = !this.dialogTableVisible;
      let data = {
        id: vlue.id
      };
      getLinkUrl(data).then(res => {
        // console.log(res)

        this.dialogqrcopy = res.msg.link;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.proImg {
  display: flex;
  align-items: center;
}

.pro_t0 {
  color: #2d8cf0;
  background: #f0faff;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}

.pro_t1 {
  color: #e6a23c;
  background: #d2efe0;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}
.dialog_box {
  min-width: 300px;
  margin: auto;
}
.qrcopy {
  width: 50%;
  min-width: 200px;
  display: block;
  margin: auto;
}
.disf {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 0 20px;
  span {
    padding: 10px;
  }
}
</style>
